<template>
  <div class="UserManagementList">
    <el-card class="searchBox">
      <h3>VIP用户列表</h3>
      <div class="one">
        <el-input
          v-model="id"
          placeholder="请输入ID"
          oninput="value=value.replace(/[^\d]/g,'')"
        ></el-input>
        <!-- <el-input v-model="name" placeholder="请输入昵称"></el-input> -->
        <el-input
          v-model="phone"
          placeholder="请输入手机号"
          oninput="value=value.replace(/[^\d]/g,'')"
          maxlength="11"
        ></el-input>
        <el-select v-model="vipOptionVal" placeholder="请选择费率">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-date-picker
          v-model="vipTimeVal"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          value-format="yyyy-MM-dd"
          @change="focus"
        >
        </el-date-picker>
        <el-input
          v-model="InvitationCode"
          placeholder="请输入邀请码"
          maxlength="10"
          style="margin-left: 10px"
        ></el-input>
        <el-button class="btn" @click="vipUserListBtn">查询</el-button>
        <!-- <el-button
          class="btn"
          v-if="this.indexB == 2"
          @click="logsGetVipLogListBtn"
          >查询</el-button
        > -->
      </div>

      <div class="one">
        <p>添加VIP</p>
        <el-input
          v-model="addId"
          placeholder="请输入ID"
          oninput="value=value.replace(/[^\d]/g,'')"
        >
        </el-input
        ><el-select v-model="addVipOptionVal" placeholder="请选择费率">
          <el-option
            v-for="item in addOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-input v-model="reason" placeholder="请输入原因"></el-input
        ><el-button class="btn" @click="vipuserAddBtn">确认</el-button>
      </div>
      <div class="p">
        <p :class="{ active: indexB == 1 }" @click="activeStatusA()">
          用户购买
        </p>
        <p :class="{ active: indexB == 2 }" @click="activeStatusB()">
          系统添加
        </p>
      </div>

      <!-- 用户购买 -->
      <div v-if="this.indexB == 1">
        <el-table :data="tableData" v-loading="loading" style="width: 100%">
          <el-table-column prop="id" label="用户ID">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.id }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="vipTime" label="VIP时长">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.vipTime }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="vip" label="VIP类型">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.vip }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="昵称">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="avatar" label="头像" width="160">
            <template slot-scope="scope">
              <!-- <img
                :src="scope.row.avatar"
                alt
                preview
                v-if="scope.row.avatar != ''"
                class="img"
              /> -->
              <el-image
                v-if="scope.row.avatar != ''"
                class="img"
                :src="scope.row.avatar"
                :preview-src-list="imgArr(tableData)"
              >
              </el-image>
              <img
                src="https://ui-avatars.com/api/?name=无头像&length=3&font-size=0.23"
                alt
                v-else
                class="img"
              />
            </template>
          </el-table-column>
          <el-table-column prop="useVersion" label="使用版本">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.useVersion }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="system" label="系统">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.system }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="sources" label="注册来源"> </el-table-column>
          <el-table-column prop="register_utm_source" label="渠道">
          </el-table-column>
          <el-table-column prop="address" label="操作" width="160">
            <template slot-scope="scope">
              <el-button
                type="danger"
                size="small"
                @click="userVipBan(scope.row)"
                round
                v-if="scope.row.state !== 2"
                >提前终止</el-button
              >
            </template>
          </el-table-column>
          <el-table-column prop="state" label="状态">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{
                scope.row.state == 0
                  ? "正常"
                  : scope.row.state == 1
                  ? "已终止"
                  : "已过期"
              }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="" label="用户详情">
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="small"
                @click="detailsBtn(scope.row)"
                round
                >用户详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="page"
          :limit.sync="pageSize"
          @pagination="getList"
        />
      </div>

      <!-- 系统添加 -->
      <div v-if="this.indexB == 2">
        <el-table :data="tableDataA" v-loading="loadingA" style="width: 100%">
          <el-table-column prop="id" label="用户ID"> </el-table-column>
          <el-table-column prop="create_time" label="VIP时长">
          </el-table-column>
          <el-table-column prop="vip" label="VIP类型">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{
                scope.row.cost == 1
                  ? "月费"
                  : scope.row.cost == 2
                  ? "季费"
                  : "年费"
              }}</span>
            </template>
          </el-table-column>

          <el-table-column prop="name" label="昵称"> </el-table-column>
          <el-table-column prop="avatar" label="头像" width="160">
            <template slot-scope="scope">
              <!-- <img
                :src="scope.row.avatar"
                alt
                preview
                v-if="scope.row.avatar != ''"
                class="img"
              /> -->
              <el-image
                v-if="scope.row.avatar != ''"
                class="img"
                :src="scope.row.avatar"
                :preview-src-list="imgArr(tableDataA)"
              ></el-image>
              <img
                src="https://ui-avatars.com/api/?name=无头像&length=3&font-size=0.23"
                alt
                v-else
                class="img"
              />
            </template>
          </el-table-column>
          <!-- <el-table-column prop="system" label="系统"> </el-table-column> -->
          <el-table-column prop="useVersion" label="使用版本">
          </el-table-column>

          <el-table-column prop="reason" label="添加原因">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.reason }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="admin_name" label="添加人">
            <template slot-scope="scope">
              <span>{{ scope.row.admin_name }}</span>
            </template>
          </el-table-column>

          <el-table-column prop="" label="操作" width="160">
            <template slot-scope="scope">
              <el-button
                type="danger"
                size="small"
                @click="userVipBan(scope.row)"
                round
                >提前终止</el-button
              >
            </template>
          </el-table-column>
          <el-table-column prop="state" label="状态">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{
                scope.row.state == 0
                  ? "正常"
                  : scope.row.state == 1
                  ? "已终止"
                  : "已过期"
              }}</span>
            </template>
          </el-table-column>

          <el-table-column prop="" label="用户详情">
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="small"
                @click="detailsBtnA(scope.row)"
                round
                >用户详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="totalA > 0"
          :total="totalA"
          :page.sync="pageA"
          :limit.sync="pageSizeA"
          @pagination="getListA"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import {
  vipuserList,
  vipuserAdd,
  userVipBan,
  logsGetVipLogList,
} from "@/api/UserManagement";
import Pagination from "@/components/Pagination"; // 分页

export default {
  components: { Pagination },
  inject: ["reload"],
  data() {
    return {
      loading: true,
      loadingA: true,
      indexB: 1,
      id: "",
      // name: "", //昵称
      phone: "", //手机号
      pickerOptions: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      vipTimeValStartDate: "",
      vipTimeValEndDate: "",
      vipTimeVal: "", //时间日期
      InvitationCode: "", //邀请码
      options: [
        {
          value: "1",
          label: "月费",
        },
        {
          value: "2",
          label: "季费",
        },
        {
          value: "3",
          label: "年费",
        },
        {
          value: "",
          label: "全部",
        },
      ],
      vipOptionVal: "", //下拉框

      //添加
      addOptions: [
        {
          value: "1",
          label: "月费",
        },
        {
          value: "2",
          label: "季费",
        },
        {
          value: "3",
          label: "年费",
        },
      ],
      addVipOptionVal: "", //下拉框
      addId: "", //添加ID
      reason: "", //添加原因

      tableData: [],
      tableDataA: [],
      total: 0,
      page: 1, //页码
      pageSize: 10, //每页条数
      totalA: 0,
      pageA: 1, //页码
      pageSizeA: 10, //每页条数
      registrationTimeDialogInput: "", //注册时间
      nameDialogInput: "", //昵称
      systemDialogInput: "", //系统
      ipDialogInput: "", //ip
      useVersionDialogInput: "", //版本号
      stateDialogInput: "", //状态
      gradeDialogInput: "", //会员等级
      timeDialogInput: "", //会员时间
    };
  },
  methods: {
    //VIP列表
    vipuserList() {
      this.loading = true;
      vipuserList({
        page: this.page,
        pageSize: this.pageSize,
        startTime: "",
        endTime: "",
        id: "",
        name: "",
        phone: "",
        cost: "",
      }).then((res) => {
        console.log(res);
        if (res.code == 0) {
          this.tableData = res.data.list;
          this.total = parseInt(res.data.total);
          this.loading = false;
        }
      });
      // logsGetVipLogList({
      //   page: this.page,
      //   pageSize: this.pageSize,
      //   type: 1,
      //   id: "",
      //   phone: "",
      //   cost: "",
      // }).then((res) => {
      //   if (res.code == 0) {
      //     this.tableDataA = res.data.list;
      //     this.totalA = parseInt(res.data.count);
      //   }
      // });
    },
    //VIP列表查询
    vipUserListBtn() {
      if (this.page !== 1) {
        this.page = 1;
      }
      if (this.pageA !== 1) {
        this.pageA = 1;
      }
      if (this.indexB == 1) {
        this.loading = true;

        vipuserList({
          page: this.page,
          pageSize: this.pageSize,
          startTime: this.vipTimeValStartDate,
          endTime: this.vipTimeValEndDate,
          id: this.id,
          phone: this.phone,
          cost: this.vipOptionVal,
          code: this.InvitationCode,
        }).then((res) => {
          console.log(res);
          if (res.code == 0) {
            this.tableData = res.data.list;
            this.total = parseInt(res.data.total);
            this.loading = false;
          }
        });
      } else {
        this.loadingA = true;

        logsGetVipLogList({
          page: this.pageA,
          pageSize: this.pageSizeA,
          type: 1,
          id: this.id,
          phone: this.phone,
          cost: this.vipOptionVal,
          startTime: this.vipTimeValStartDate,
          endTime: this.vipTimeValEndDate,
          code: this.InvitationCode,
          // InvitationCode: this.InvitationCode,
        }).then((res) => {
          if (res.code == 0) {
            this.tableDataA = res.data.list;
            this.totalA = parseInt(res.data.count);
            this.loadingA = false;
          }
        });
      }
    },
    //系统添加查询
    // vipuserListBtn() {
    //   if (this.page !== 1) {
    //     this.page = 1;
    //   }
    //   logsGetVipLogList({
    //     page: this.pageA,
    //     pageSize: this.pageSizeA,
    //     type: 2,
    //     id: this.id,
    //     phone: this.phone,
    //     cost: this.vipOptionVal,
    //     startTime: this.vipTimeValStartDate,
    //     endTime: this.vipTimeValEndDate,
    //   }).then((res) => {
    //     if (res.code == 0) {
    //       this.tableDataA = res.data.list;
    //       this.totalA = parseInt(res.data.count);
    //     }
    //   });
    // },
    //分页
    getList() {
      this.loading = true;

      vipuserList({
        page: this.page,
        pageSize: this.pageSize,
        startTime: this.vipTimeValStartDate,
        endTime: this.vipTimeValEndDate,
        id: this.id,
        phone: this.phone,
        cost: this.vipOptionVal,
      }).then((res) => {
        if (res.code == 0) {
          this.tableData = res.data.list;
          this.total = parseInt(res.data.total);
          this.loading = false;
        }
      });
    },
    getListA() {
      this.loadingA = true;

      logsGetVipLogList({
        page: this.pageA,
        pageSize: this.pageSizeA,
        type: 1,
        id: this.id,
        phone: this.phone,
        cost: this.vipOptionVal,
      }).then((res) => {
        if (res.code == 0) {
          this.tableDataA = res.data.list;
          this.totalA = parseInt(res.data.count);
          this.loadingA = false;
        }
      });
    },
    //详情
    detailsBtn(row) {
      this.$router.push({
        path: "/UserManagement/UserDetailsList",
        query: {
          id: row.id,
        },
      });
    },
    detailsBtnA(row) {
      this.$router.push({
        path: "/UserManagement/UserDetailsList",
        query: {
          id: row.id,
        },
      });
    },
    //操作
    userVipBan(row) {
      console.log(row);
      this.$confirm("此操作将提前终止该用户的会员时间, 是否继续?", "终止提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          userVipBan({
            id: row.id,
            ban: row.state,
          }).then((res) => {
            if (res.code == 0) {
              this.$message({
                message: "终止成功",
                type: "success",
              });
              this.reload();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消终止",
          });
        });
    },
    //添加VIP
    vipuserAddBtn() {
      var num = "";
      if (this.indexB == 1) {
        num = 1;
      } else {
        num = 2;
      }
      if (this.addId && this.addVipOptionVal && this.reason !== "") {
        vipuserAdd({
          id: this.addId,
          cost: this.addVipOptionVal,
          reason: this.reason,
          type: num,
        }).then((res) => {
          if (res.code == 0) {
            this.$message({
              message: "添加VIP成功",
              type: "success",
            });
            this.reload();
          }
        });
      } else {
        this.$message({
          message: "请正确填写添加内容",
          type: "warning",
        });
      }
    },

    activeStatusA() {
      this.indexB = 1;
      this.loading = true;

      vipuserList({
        page: this.page,
        pageSize: this.pageSize,
        startTime: this.vipTimeValStartDate,
        endTime: this.vipTimeValEndDate,
        id: this.id,
        phone: this.phone,
        cost: this.vipOptionVal,
      }).then((res) => {
        if (res.code == 0) {
          this.tableData = res.data.list;
          this.total = parseInt(res.data.total);
          this.loading = false;
        }
      });
    },
    activeStatusB() {
      this.indexB = 2;
      this.loadingA = true;

      logsGetVipLogList({
        page: this.pageA,
        pageSize: this.pageSizeA,
        type: 1,
        id: this.id,
        phone: this.phone,
        cost: this.vipOptionVal,
      }).then((res) => {
        if (res.code == 0) {
          this.tableDataA = res.data.list;
          this.totalA = parseInt(res.data.count);
          this.loadingA = false;
        }
      });
    },
    //时间
    focus(time) {
      if (!this.vipTimeVal) {
        this.vipTimeVal = [];
      }
      this.vipTimeValStartDate = this.vipTimeVal[0];
      this.vipTimeValEndDate = this.vipTimeVal[1];
    },
  },
  created() {
    this.vipuserList();
  },
  computed: {
    imgArr: () => {
      return (arr) => {
        let imgList = [];
        arr.forEach((item) => {
          imgList.push(item.avatar);
        });
        // console.log(imgList);
        return imgList;
      };
    },
  },
};
</script>

<style lang="less" >
.UserManagementList {
  margin: 30px;
  height: 100%;
  .searchBox {
    .one {
      display: flex;
      margin-bottom: 20px;
      .el-input {
        width: 160px;
        margin-right: 20px;
      }
      .el-select {
        margin-right: 20px;
      }
      .el-button {
        margin-left: 20px;
        height: 40px;
      }
      p {
        margin-right: 10px;
      }
    }
  }
  .el-table {
    margin-top: 30px;
    .img {
      width: 70px;
      height: 70px;
      border-radius: 10px;
    }
  }
  .p {
    display: flex;
    p {
      width: 100px;
      height: 40px;
      line-height: 40px;
      text-align: center;
    }
  }
  .active {
    background-color: #0079fe;
    color: #fff;
    border-radius: 10px;
  }
  .box {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
    .el-input {
      width: 300px;
      .el-input-group__prepend {
        width: 110px;
      }
    }
  }
}
</style>